<template>
    <div class="position-sticky top-0 bg-[hsla(0,0%,7%,.95)] z-9999">
        <div class="bg-[hsla(0,0%,7%,.95)]">
            <div class="max-width nav-container">
                <NuxtLink to="/">
                    <div class="w-[150px] h-[22px] cursor-pointer">
                        <el-image src="/logo.svg" fit="cover" />
                    </div>
                </NuxtLink>
                <div class="flex items-center gap-[20px]">
                    <div class="nav-text-container">
                        <el-popover
                            v-for="(v, i) in navList"
                            :key="i"
                            placement="bottom"
                            :width="v.width"
                            trigger="click"
                            effect="dark"
                            :hide-after="0"
                            :offset="16"
                            :show-arrow="false"
                            popper-class="bg-[rgba(0,0,0,0.95)!important] rounded-[15px!important]"
                            @hide="onPopoverHide(i)"
                        >
                            <template #reference>
                                <div
                                    @click="onNavTextClick(i)"
                                    class="nav-text border-b-solid border-b-1.6px border-b-[#131313]"
                                    :style="i == current && activeStyle"
                                >
                                    <span>{{ v.name }}</span>
                                    <span
                                        class="text-[13px]"
                                        :class="i == current ? 'i-fa6-solid-chevron-up' : 'i-fa6-solid-chevron-down'"
                                    />
                                </div>
                            </template>
                            <!-- text0 -->
                            <div v-if="current == 0" class="nav-text0-container">
                                <div class="nav-content-title">
                                    <el-avatar src="/nav/nav_text1.svg" :size="22" />
                                    <div>从此处开始</div>
                                </div>
                                <div class="nav-content-li">
                                    <div class="text-[#fff]">区块链和Solana入门课程</div>
                                    <div>有关Solana和web3的所有基础知识</div>
                                </div>
                                <div class="nav-content-li">
                                    <div class="text-[#fff]">NFT介绍</div>
                                    <div>Solana上你需要知道的NFTs的所有内容</div>
                                </div>
                                <div class="nav-content-li">
                                    <div class="text-[#fff]">环境影响</div>
                                    <div>Solana如何支持更环保的web3</div>
                                </div>
                            </div>
                            <!-- text1 -->
                            <div v-if="current == 1" class="flex items-start gap-[30px]">
                                <div class="nav-text1-left-container basis-3/4">
                                    <div class="nav-content-title">
                                        <el-avatar src="/nav/nav_text2.svg" :size="22" />
                                        <div>开始构建</div>
                                    </div>
                                    <div class="nav-content-li">
                                        <div class="text-[#fff]">开发人员学习中心</div>
                                        <div>从今天开始学习如何构建</div>
                                    </div>
                                    <div class="nav-content-li">
                                        <div class="text-[#fff]">Solana文档</div>
                                        <div>Solana 区块链的官方文档</div>
                                    </div>
                                    <div class="nav-content-li">
                                        <div class="text-[#fff]">资源</div>
                                        <div>用于在Solana 上构建的广泛开发人员工具</div>
                                    </div>
                                    <div class="nav-content-li">
                                        <div class="text-[#fff]">课程</div>
                                        <div>在线、自定进度的课程，指导您完成发展</div>
                                    </div>
                                </div>
                                <div class="nav-text1-right-container basis-1/4">
                                    <div class="nav-content-title">
                                        <el-avatar src="https://cdn.udivui.com/udiv/album/1.jpg" :size="22" />
                                        <div>教程</div>
                                    </div>
                                    <div class="nav-content-li">
                                        <div class="text-[#fff] block">Hello Word</div>
                                    </div>
                                    <div class="nav-content-li">
                                        <div class="text-[#fff]">Local Setup</div>
                                    </div>
                                    <div class="nav-content-li">
                                        <div class="text-[#fff]">EVM to SVM</div>
                                    </div>
                                    <div class="nav-content-li">
                                        <div class="text-[#fff]">All Guides</div>
                                    </div>
                                </div>
                            </div>
                            <!-- text2 -->
                            <div v-if="current == 2" class="flex items-start gap-[20px]">
                                <div class="nav-text2-left-container basis-12/20">
                                    <div class="nav-content-title">
                                        <el-avatar src="https://cdn.udivui.com/udiv/album/1.jpg" :size="22" />
                                        <div>工具</div>
                                    </div>
                                    <div class="nav-content-li">
                                        <div class="text-[#fff]">Token Extensions</div>
                                    </div>
                                    <div class="nav-content-li">
                                        <div class="text-[#fff]">Actions and Blockchain Links</div>
                                    </div>
                                    <div class="nav-content-li">
                                        <div class="text-[#fff]">Solana权限环境</div>
                                    </div>
                                    <div class="nav-content-li">
                                        <div class="text-[#fff]">游戏工具</div>
                                    </div>
                                    <div class="nav-content-li">
                                        <div class="text-[#fff]">支付工具</div>
                                    </div>
                                    <div class="nav-content-li">
                                        <div class="text-[#fff]">Commerce Tooling</div>
                                    </div>
                                    <div class="nav-content-li">
                                        <div class="text-[#fff]">金融基础设施</div>
                                    </div>
                                    <div class="nav-content-li">
                                        <div class="text-[#fff]">数字资产</div>
                                    </div>
                                    <div class="nav-content-li">
                                        <div class="text-[#fff]">Real Word Assets</div>
                                    </div>
                                    <div class="nav-content-li">
                                        <div class="text-[#fff]">移动端</div>
                                    </div>
                                </div>
                                <div class="nav-text2-right-container basis-8/20">
                                    <div class="nav-content-title basis-11/20">
                                        <el-avatar src="https://cdn.udivui.com/udiv/album/1.jpg" :size="22" />
                                        <div>使用案例</div>
                                    </div>
                                    <div class="nav-content-li">
                                        <div class="text-[#fff]">企业</div>
                                    </div>
                                    <div class="nav-content-li">
                                        <div class="text-[#fff]">游戏和娱乐</div>
                                    </div>
                                    <div class="nav-content-li">
                                        <div class="text-[#fff]">艺术家和创作者</div>
                                    </div>
                                    <div class="nav-content-li">
                                        <div class="text-[#fff]">Financial Institutions</div>
                                    </div>
                                </div>
                            </div>
                            <!-- text3 -->
                            <div v-if="current == 3" class="flex items-start gap-[30px]">
                                <div class="nav-text3-left-container basis-1/2">
                                    <div class="nav-content-title">
                                        <el-avatar src="https://cdn.udivui.com/udiv/album/1.jpg" :size="22" />
                                        <div>开发资源</div>
                                    </div>
                                    <div class="nav-content-li">
                                        <div class="text-[#fff]">成为验证者</div>
                                        <div>帮助运行 Solana 网络</div>
                                    </div>
                                    <div class="nav-content-li">
                                        <div class="text-[#fff]">RPC 提供者</div>
                                        <div>构建可扩展的加密应用程序</div>
                                    </div>
                                    <div class="nav-content-li">
                                        <div class="text-[#fff]">网络状态</div>
                                        <div>网络性能和状态</div>
                                    </div>
                                    <div class="nav-content-li">
                                        <div class="text-[#fff]">上下坡道</div>
                                        <div>将你的资产带到 Solana</div>
                                    </div>
                                </div>
                                <div class="nav-text3-right-container basis-1/2">
                                    <div class="nav-content-title">
                                        <el-avatar src="https://cdn.udivui.com/udiv/album/1.jpg" :size="22" />
                                        <div>检查</div>
                                    </div>
                                    <div class="nav-content-li">
                                        <div class="text-[#fff]">Solscan</div>
                                        <div>实时浏览 Solana 区块链</div>
                                    </div>
                                    <div class="nav-content-li">
                                        <div class="text-[#fff]">SolanaFM</div>
                                        <div>Solana 区块链浏览器和索引器</div>
                                    </div>
                                </div>
                            </div>
                            <!-- text4 -->
                            <div v-if="current == 4">
                                <div class="nav-text4-container">
                                    <div class="nav-content-title">
                                        <el-avatar src="https://cdn.udivui.com/udiv/album/1.jpg" :size="22" />
                                        <div>参与</div>
                                    </div>
                                    <div class="nav-content-li">
                                        <div class="text-[#fff]">新闻信息</div>
                                        <div>Solana 生态系统的最新动态</div>
                                    </div>
                                    <div class="nav-content-li">
                                        <div class="text-[#fff]">活动</div>
                                        <div>亲身体验Solana 社区</div>
                                    </div>
                                    <div class="nav-content-li">
                                        <div class="text-[#fff]">团体</div>
                                        <div>帮助更大的生态体系</div>
                                    </div>
                                    <div class="nav-content-li">
                                        <div class="text-[#fff]">社区资源中心</div>
                                        <div>如何加入</div>
                                    </div>
                                </div>
                            </div>
                        </el-popover>
                    </div>
                    <div>
                        <div class="max-lg:hidden">
                            <div class="nav-text h-[unset!important] nav-search">
                                <span class="i-fa6-solid-magnifying-glass text-[16px]" />
                                <span>Search</span>
                            </div>
                        </div>
                        <div class="hidden max-lg:block">
                            <div class="nav-search-container-min">
                                <span class="i-fa6-solid-bars" />
                                <span class="i-fa6-solid-magnifying-glass hover:border-(solid 1px #5468ff)" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, computed } from "vue"

const current = ref(-1)
const activeColors = ["#19FB9B", "#FED612", "#FF5722", "#9945FF", "#F087FF"]
const activeStyle = computed(() => `border-bottom-color: ${activeColors[current.value]}!important`)
const navList = [
    { name: "学习", width: 355 },
    { name: "开发人员", width: 690 },
    { name: "解决方案", width: 515 },
    { name: "网络", width: 590 },
    { name: "社区", width: 355 }
]

const onNavTextClick = (index: number) => {
    if (current.value == index) {
        current.value = -1
        return
    }
    current.value = index
}

const onPopoverHide = (index: number) => {
    if (current.value == index) {
        current.value = -1
        return
    }
}
</script>

<style scoped>
.nav-container {
    --at-apply: h-[76px] flex items-center justify-between overflow-hidden px-[20px];
}

.nav-text-container {
    --at-apply: flex items-center bg-[transparent] static gap-[38px] z-9999 max-lg:hidden;
}

.nav-text {
    --at-apply: h-[40px] flex items-center gap-[5px] text-[#848895] text-[17.5px]
    hover:text-[#fff] cursor-pointer;
}

.nav-search {
    --at-apply: flex items-center gap-[10px] p-[6px_12px] border-(solid 2px #2a2b2f rounded-[10px])
    hover:border-(solid 2px #5468ff);
}

.nav-search-container-min {
    --at-apply: h-[unset !important] flex items-center gap-[25px] text-[#fff]
    text-[17px] cursor-pointer;
}

.nav-content-title {
    --at-apply: flex items-center gap-[15px] font-bold text-[#848895] mb-[10px];
}

.nav-content-li {
    --at-apply: flex flex-col justify-center flex-1 gap-[8px] cursor-pointer p-[10px_8px]
    rounded-[10px] border-(solid 1px #020103) text-[#848895] hover:(bg-[#151118]
    border-(solid 1px #2A262D)) hover:text-[#fff !important];
}

.nav-text0-container {
    --at-apply: p-[20px_5px] flex flex-col justify-center gap-[8px] text-[16px];
}

.nav-text1-left-container {
    --at-apply: p-[20px_30px_20px_10px] flex flex-col justify-center gap-[8px] text-[16px]
    border-r-[1px] border-r-solid border-r-[hsla(0,0%,100%,.1)];
}

.nav-text1-right-container {
    --at-apply: p-[20px_0_20px_0] flex flex-col justify-center gap-[8px] text-[16px];
}

.nav-text2-left-container {
    --at-apply: p-[20px_20px_20px_10px] flex flex-col justify-center gap-[5px] text-[16px]
    border-r-[1px] border-r-solid border-r-[hsla(0,0%,100%,.1)];
}

.nav-text2-right-container {
    --at-apply: p-[20px_0_20px_0] flex flex-col justify-center gap-[8px] text-[16px];
}

.nav-text3-left-container {
    --at-apply: p-[20px_30px_20px_10px] flex flex-col justify-center gap-[8px] text-[16px]
    border-r-[1px] border-r-solid border-r-[hsla(0,0%,100%,.1)];
}

.nav-text3-right-container {
    --at-apply: p-[20px_0_20px_0] flex flex-col justify-center gap-[8px] text-[16px];
}

.nav-text4-container {
    --at-apply: p-[20px_30px_20px_10px] flex flex-col justify-center gap-[8px] text-[16px];
}
</style>
